<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #one{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            float: left;
        }
        #two{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        form{
            float: left;
        }

        .one1{
            transform: skew(30deg);
            -ms-transform: skew(30deg);	/* IE 9 */
            -webkit-transform: skew(30deg);	/* Safari and Chrome */
            -o-transform: skew(30deg);	/* Opera */
            -moz-transform: skew(30deg);	/* Firefox */
        }
        .one2{
            transform: skew(60deg);
            -ms-transform: skew(60deg);	/* IE 9 */
            -webkit-transform: skew(60deg);	/* Safari and Chrome */
            -o-transform: skew(60deg);	/* Opera */
            -moz-transform: skew(60deg);	/* Firefox */
        }
        .one3{
            transform: skew(90deg);
            -ms-transform: skew(90deg);	/* IE 9 */
            -webkit-transform: skew(90deg);	/* Safari and Chrome */
            -o-transform: skew(90deg);	/* Opera */
            -moz-transform: skew(90deg);	/* Firefox */
        }
        .one4{
            transform: skew(120deg);
            -ms-transform: skew(120deg);	/* IE 9 */
            -webkit-transform: skew(120deg);	/* Safari and Chrome */
            -o-transform: skew(120deg);	/* Opera */
            -moz-transform: skew(120deg);	/* Firefox */
        }
        .one5{
            transform: skew(30deg,30deg);
            -ms-transform: skew(30deg,30deg);	/* IE 9 */
            -webkit-transform: skew(30deg,30deg);	/* Safari and Chrome */
            -o-transform: skew(30deg,30deg);	/* Opera */
            -moz-transform: skew(30deg,30deg);	/* Firefox */
        }
        .one6{
            transform: skew(60deg,60deg);
            -ms-transform: skew(60deg,60deg);	/* IE 9 */
            -webkit-transform: skew(60deg,60deg);	/* Safari and Chrome */
            -o-transform: skew(60deg,60deg);	/* Opera */
            -moz-transform: skew(60deg,60deg);	/* Firefox */
        }
        .one7{
            transform: skew(90deg,90deg);
            -ms-transform: skew(90deg,90deg);	/* IE 9 */
            -webkit-transform: skew(90deg,90deg);	/* Safari and Chrome */
            -o-transform: skew(90deg,90deg);	/* Opera */
            -moz-transform: skew(90deg,90deg);	/* Firefox */
        }
        .one8{
            transform: skew(120deg,120deg);
            -ms-transform: skew(120deg,120deg);	/* IE 9 */
            -webkit-transform: skew(120deg,120deg);	/* Safari and Chrome */
            -o-transform: skew(120deg,120deg);	/* Opera */
            -moz-transform: skew(120deg,120deg);	/* Firefox */
        }
    </style>
</head>
<body>
<form action="#">
    <input type="radio" name="nn" value="translate" onclick="one1()"/>skew(30deg)</br>
    <input type="radio" name="nn" value="translate" onclick="one2()"/>skew(60deg)</br>
    <input type="radio" name="nn" value="translate" onclick="one3()"/>skew(90deg)</br>
    <input type="radio" name="nn" value="translate" onclick="one4()"/>skew(120deg)</br>
    <input type="radio" name="nn" value="translate" onclick="one5()"/>skew(30deg,30deg)</br>
    <input type="radio" name="nn" value="translate" onclick="one6()"/>skew(60deg,60deg)</br>
    <input type="radio" name="nn" value="translate" onclick="one7()"/>skew(90deg,90deg)</br>
    <input type="radio" name="nn" value="translate" onclick="one8()"/>skew(120deg,120deg)
  </form>
<div id="one">
    <div id="two">MY DIV</div>
</div>

</body>
<script type="text/javascript">
    var rad = document.getElementById("two");
    function one1(){
        rad.className="one1";
    }
    function one2(){
        rad.className="one2";
    }
    function one3(){
        rad.className="one3";
    }
    function one4(){
        rad.className="one4";
    }
    function one5(){
        rad.className="one5";
    }
    function one6(){
        rad.className="one6";
    }
    function one7(){
        rad.className="one7";
    }
    function one8(){
        rad.className="one8";
    }
</script>
</html>